<div id="accordion">
<div class="card">
    <div class="card-header">
        <h4 class="card-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseClarifications">Clarifications</a></h4>
        <div class="card-tools">
            <span id="clarifications-count" data-toggle="tooltip" title="?" class="badge bg-primary">?</span>
        </div>
    </div>
    <div id="collapseClarifications" class="panel-collapse collapse in">
    <div class="card-body p-0">
        <table id="clarifications-table" class="table table-sm table-hover table-striped table-head-fixed">
            <thead>
                <tr>
                    <th class="text-center">Time</th>
                    <th>Problem</th>
                    <th>From Team</th>
                    <th>To Team</th>
                    <th>Text</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    </div>
</div>
</div>
<script type="text/html" id="clarifications-template">
  <td align="center">{{time}}</td>
  <td>{{problem}}</td>
  <td>{{fromTeam}}</td>
  <td>{{toTeam}}</td>
  <td class="pre-line">{{{text}}}</td>
</script>
<script type="text/javascript">
registerContestObjectTable("clarifications");

$(document).ready(function () {
    $.when(contest.loadClarifications(), contest.loadTeams(), contest.loadProblems()).done(function () {
        fillContestObjectTable("clarifications", contest.getClarifications())
    }).fail(function (result) {
    	console.log("Error loading clarifications: " + result);
    })
})
    
function submitClarification(to_team, text) {
	var obj = { to_team_id: to_team, text: text };
	console.log(obj);
	console.log(JSON.stringify(obj));
	contest.postClarification(JSON.stringify(obj), function(body) {
		$('#object-status').text("Posted successfully: " + body);
	}, function(result) {
		$('#object-status').text("Post failed: " + result.responseText);
	})
}
</script>